import React, { Component } from 'react'
import eventBus from './utils/event-bus'
import Home from './c-cpns/Home';

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      name: '',
      age: 0,
      height: 0
    }
  }

  bannerPrevFn(...info) {
    console.log('App Component: ', info)
    this.setState({
      name: info[0],
      age: info[1],
      height: info[2]
    })
  }

  bannerNextFn(obj) {
    console.log('App Component: bannerNextFn', obj)
    this.setState({
      name: obj.name,
      age: obj.age,
      height: obj.height
    })
  }

  componentDidMount() {
    eventBus.on('bannerPrev', this.bannerPrevFn, this)
    eventBus.on('bannerNext', this.bannerNextFn, this)
  }

  componentWillUnmount() {
    eventBus.off('bannerPrev', this.bannerPrevFn)
    eventBus.off('bannerNext', this.bannerNextFn)
  }
  
  render() {
    const { name, age, height } = this.state
    
    return (
      <div>
        <h3>App Component: {name} - {age} - {height}</h3>
        <Home />
      </div>
    )
  }
}
